<template>

    <div class="content manifest-list">
        <div class="content-top">
            <Tabs active-key="key1" :animated="false" @on-click="changeTab">
                <Tab-pane label="未支付" key="0"></Tab-pane>
                <Tab-pane label="支付处理中" key="1"></Tab-pane>
                <Tab-pane label="支付完成" key="2"></Tab-pane>
            </Tabs>
            <Form v-model="params" class="clearfix" :label-width="88">
                <Row>
                    <iCol :span="3" class="search-label text-r text-h lh30" >报关单号：</iCol>
                    <iCol :span="4">
                        <Input v-model="params.entryId" placeholder=""/>
                    </iCol>
                    <iCol :span="3" class="search-label text-r text-h lh30" >税单生成时间：</iCol>
                    <iCol :span="4">
                        <Date-picker @on-change="params.generationTime=$event" format="yyyy-MM-dd HH:mm:ss" v-model="params.generationTime" type="datetime" placeholder="选择日期和时间"></Date-picker>
                    </iCol>
                    <iCol :span="4" class="text-r">
                        <Button class="icon-btn" type="primary" @click="search">
                            查询
                        </Button>
                    </iCol>
                    <iCol class="text-r" :span="6">
                        您勾选的总金额为{{all}}
                    </iCol>
                </Row>
            </Form>
            <div class="mt-10">
                <Button @click="showDetailBtn">税单详细信息</Button>
                <Button @click="showShuiwuBtn">税单货物信息</Button>
                <Button v-if="now==0" @click="showShenQBtn">申请支付</Button>
                <Button v-if="now==1" @click="showQueRBtn">确认支付</Button>
            </div>
        </div>
        <div class="content-body">
            <Table @on-selection-change="changeSelected" :data="list" :columns="columns" border align="center">

                <template slot-scope="{ row }" slot="taxType">
                    <div>{{taxTypes[row.taxType]}}</div>
                </template>
                <template slot-scope="{ row }" slot="summaryFlag">
                    <div>{{summaryFlags[row.summaryFlag]}}</div>
                </template>
                <template slot-scope="{ row }" slot="status">
                    <div>{{statusT[row.status] }}</div>
                </template>
                <template slot-scope="{ row }" slot="action">
                    <div v-if="row.status==1"><a @click="view(row)">查看</a></div>
                    <div v-else><a @click="applyOne(row.id)">申报</a> &nbsp;&nbsp; <a>删除</a></div>

                </template>

            </Table>
            <Pagination
                :pageSize.sync="params.pageSize"
                :current.sync="params.pageNum"
                :total="total"
                @change="queryList"
            />
        </div>
        <Modal
            title="税单详细信息"
            v-model="showDetail"
            width="700px"
        >
            <Row>
                <Col class="text-r" :span="4">税费单序号:</Col>
                <Col :span="8">&nbsp;<span>{{nowDetail.serialNumber}}</span></Col>
                <Col class="text-r" :span="4">报关单号：</Col>
                <Col :span="8">&nbsp;<span>{{nowDetail.entryId}}</span></Col>
            </Row>
            <Row>
                <Col class="text-r" :span="4">提单号:</Col>
                <Col :span="8">&nbsp;{{nowDetail.billNo}}</Col>
                <Col class="text-r" :span="4">税费种类：</Col>
                <Col :span="8">&nbsp;{{taxTypes[nowDetail.taxType]}}</Col>
            </Row>
            <Row>
                <Col class="text-r" :span="4">税费单号：</Col>
                <Col :span="8">&nbsp;{{nowDetail.taxNo}}</Col>
                <Col class="text-r" :span="4">税单开征日期：</Col>
                <Col :span="8">&nbsp;{{nowDetail.levyDate}}</Col>
            </Row>
            <Row>
                <Col class="text-r" :span="4">收发货单位编码：</Col>
                <Col :span="8">&nbsp;{{nowDetail.tradeCode}}</Col>
                <Col class="text-r" :span="4">收发货人单位名称：</Col>
                <Col :span="8">22</Col>
            </Row>
            <Row>
                <Col class="text-r" :span="4">消费使用单位/</Col>
                <Col :span="8">&nbsp;</Col>
                <Col class="text-r" :span="4">消费使用单位/</Col>
                <Col :span="8">&nbsp;</Col>
            </Row>
            <Row>
                <Col class="text-r" :span="4">生产销售单位编码：</Col>
                <Col :span="8">&nbsp;{{nowDetail.ownerCode}}</Col>
                <Col class="text-r" :span="4">生产销售单位名称：</Col>
                <Col :span="8">&nbsp;{{nowDetail.ownerName}}</Col>
            </Row>
            <Row>
                <Col class="text-r" :span="4">申报单位编号：</Col>
                <Col :span="8">&nbsp;{{nowDetail.agentCode}}</Col>
                <Col class="text-r" :span="4">申报单位名称：</Col>
                <Col :span="8">&nbsp;{{nowDetail.agentName}}</Col>
            </Row>
            <Row>
                <Col class="text-r" :span="4">纳税人识别号：</Col>
                <Col :span="8">&nbsp;{{nowDetail.tradeCoScc}}</Col>
                <Col class="text-r" :span="4">备案关区：</Col>
                <Col :span="8">&nbsp;{{nowDetail.declPort}}</Col>
            </Row>
            <Row>
                <Col class="text-r" :span="4">征免性质：</Col>
                <Col :span="8">&nbsp;{{nowDetail.cutMode}}</Col>
                <Col class="text-r" :span="4">监管方式：</Col>
                <Col :span="8">&nbsp;{{nowDetail.tradeMode}}</Col>
            </Row>
            <Row>
                <Col class="text-r" :span="4">进出口岸：</Col>
                <Col :span="8">&nbsp;{{nowDetail.iePort}}</Col>
                <Col class="text-r" :span="4">进/出口日期：</Col>
                <Col :span="8">&nbsp;{{nowDetail.ieDate}}</Col>
            </Row>
            <Row>
                <Col class="text-r" :span="4">进出口标志：</Col>
                <Col :span="8">&nbsp;{{nowDetail.ieFlag}}</Col>
                <Col class="text-r" :span="4">主要商品名称：</Col>
                <Col :span="8">{{nowDetail.list&&nowDetail.list.length>0?nowDetail.list[0].goodsName:''}}</Col>
            </Row>
            <Row>
                <Col class="text-r" :span="4">缴款期限：</Col>
                <Col :span="8">&nbsp;{{nowDetail.paymentPeriod}}</Col>
                <Col class="text-r" :span="4">支付金额：</Col>
                <Col :span="8">&nbsp;{{nowDetail.paymentAmount}}</Col>
            </Row>
            <Row>
                <Col class="text-r" :span="4">税单生成时间：</Col>
                <Col :span="8">&nbsp;{{nowDetail.generationTime}}</Col>
                <Col class="text-r" :span="4">税单打印缴款单位：</Col>
                <Col :span="8">&nbsp;{{nowDetail.payer}}</Col>
            </Row>

        </Modal>
        <Modal
            title="税单货物信息"
            v-model="showShuiWu"
            width="700px"
        >
            <Button @click="changeHwDetail">货物详细信息</Button>
            <Table height="100" class="mt-10" @on-selection-change="changeHwSelected" :data="nowDetail.list" :columns="hwColumns" border align="center">

            </Table>

        </Modal>
        <Modal
            title="货物详细信息"
            v-model="showHwDetail"
            width="650px"
        >
            <Row>
                <Col class="text-r" :span="4">报关单编号：</Col>
                <Col :span="8">&nbsp;{{nowHwDetail.entryId}}</Col>
                <Col class="text-r" :span="4">商品序号：</Col>
                <Col :span="8">&nbsp;{{nowHwDetail.goodsIndex}}</Col>
            </Row>
            <Row>
                <Col class="text-r" :span="4">税号：</Col>
                <Col :span="8">&nbsp;{{nowHwDetail.taxNo}}</Col>
                <Col class="text-r" :span="4">货名：</Col>
                <Col :span="8">&nbsp;{{nowHwDetail.goodsName}}</Col>
            </Row>
            <Row>
                <Col class="text-r" :span="4">申报数量：</Col>
                <Col :span="8">&nbsp;{{nowHwDetail.gqty}}</Col>
                <Col class="text-r" :span="4">申报单位：</Col>
                <Col :span="8">&nbsp;{{nowHwDetail.gunit}}</Col>
            </Row>
            <Row>
                <Col class="text-r" :span="4">成交币制：</Col>
                <Col :span="8">&nbsp;{{nowHwDetail.tradeCurr}} </Col>
                <Col class="text-r" :span="4">外汇折算率：</Col>
                <Col :span="8">&nbsp;{{nowHwDetail.exchangeRate}}</Col>
            </Row>
            <Row>
                <Col class="text-r" :span="4">完税价格：</Col>
                <Col :span="8">&nbsp;{{nowHwDetail.dutiablePrice}}</Col>
                <Col class="text-r" :span="4">征免规定：</Col>
                <Col :span="8">&nbsp;{{nowHwDetail.dutyMode}}</Col>
            </Row>
            <Row>
                <Col class="text-r" :span="4">税率计征标准：</Col>
                <Col :span="8">&nbsp;{{nowHwDetail.taxStandard}}</Col>
                <Col class="text-r" :span="4">从价税率：</Col>
                <Col :span="8">&nbsp;{{nowHwDetail.valoremRate}}</Col>
            </Row>
            <Row>
                <Col class="text-r" :span="4">从量税率：</Col>
                <Col :span="8">&nbsp;{{nowHwDetail.specificRate}}</Col>
                <Col class="text-r" :span="4">税额：</Col>
                <Col :span="8">&nbsp;{{nowHwDetail.taxAmount}}</Col>
            </Row>
        </Modal>
        <div v-if="showShenQ">
            <Modal
                title = "税费支付"
                v-model = "showShenQ"
                width = "700px"
            >
                <div v-if="type==0">
                    <Button type="primary" @click="type=0">1.选择税单抬头单位</Button>
                    <Button @click="type=1">2.选择支付协议号</Button>
                </div>
                <div v-else>
                    <Button @click="type=0">1.选择税单抬头单位</Button>
                    <Button type="primary" @click="type=1">2.选择支付协议号</Button>
                </div>
                <div v-if="type==0">
                    <div class="mt-10">
                        提示：请确保此次税单抬头单位均为报关单中同一类型单位，且同一报关单项下税单抬头单位需要相同
                    </div>
                    <Row class="mt-10">
                        <Col :span="4" style="line-height:30px">税单抬头单位:</Col>
                        <Col :span="12">
                        <Select v-model="nowTt" @on-change="changeTt">
                            <Option :value="0">收发货人单位</Option>
                            <Option :value="1">消费使用单位</Option>
                        </Select>
                        </Col>
                    </Row>
                    <Table height="100px" v-if="nowTt==1" class="mt-10" :data="selecetd" :columns="seColumns" border align="center">

                    </Table>
                    <Table height="100px" v-else class="mt-10" :data="selecetd" :columns="fhColumns" border align="center">

                    </Table>
                </div>
                <div v-if="type==1">
                    <Table height="100px" class="mt-10" :data="selecetd" :columns="zfColumns" border align="center">

                    </Table>
                </div>
                <div slot="footer">
                    <div v-if="type==0">
                        <Button @click="next">下一步</Button>
                        <Button @click="showShenQ=false">取消</Button>
                    </div>
                    <div v-else>
                        <Button @click="prev">上一步</Button>
                        <Button @click="doPay">完成</Button>
                        <Button @click="showShenQ=false">取消</Button>

                    </div>
                </div>
            </Modal>

        </div>

    </div>
</template>
<script>
import { pay, getTaxList } from '@/api/tax'
import { downloadDoc } from '@/api/fileManage'
export default {
    inject: ['nextPageReload'],
    components: {

    },
    data () {
        return {
            taxTypes: {
                '01': '进口关税',
                '02': '进口增值税',
                '03': '进口消费税'
            },
            summaryFlags: {
                '1': '汇总纳税',
                '0': '空'
            },
            statusT: {
                '0': '未支付',
                '1': '处理中',
                '2': '已支付'
            },
            zfType: 1,
            all: 0,
            type: 0,
            nowDetail: {

            },
            nowTt: 0,
            nowHw: {},
            nowHwDetail: {},
            now: 0,
            showDetail: false,
            showShuiWu: false,
            showShenQ: false,
            showQueR: false,
            showHwDetail: false,
            trainingId: '',
            selecetd: [],
            hwSelected: [],
            total: 0,
            typeList: [
                { id: 'C', name: '一般原产地证' },
                { id: 'B', name: '亚太贸易协定原产地证书' },
                { id: 'G', name: '惠普制原产地证书' },
                { id: 'E', name: '中国-东欧自贸区原产地证书' }
            ],
            roleType: '',
            schoolList: [],
            params: {
                status: 0,
                entryId: '', // 报关单号
                generationTime: '', // 税单生成时间
                deductionTime: '', // 银行扣税时间
                pageNum: 1,
                pageSize: 10
            },
            list: [],
            columns: Object.freeze([
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                { title: '序号', type: 'index', align: 'center', width: 60 },
                { title: '报关单号', key: 'entryId', align: 'center', width: 130 },
                { title: '税费单序号', key: 'serialNumber', align: 'center' },
                { title: '税费单号', key: 'taxNo', align: 'center' },
                { title: '税费种类', slot: 'taxType', align: 'center', width: 80 },
                { title: '税单生成时间', key: 'generationTime', align: 'center', width: 140 },
                { title: '申报关区', key: 'declPort', align: 'center', width: 80 },
                { title: '缴款期限', key: 'paymentPeriod', align: 'center', width: 80 },
                { title: '支付金额', key: 'paymentAmount', align: 'center' },
                { title: '汇总征税标志', slot: 'summaryFlag', align: 'center', width: 100 },
                { title: '支付状态', slot: 'status', align: 'center', width: 100 }

            ]),
            hwColumns: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                { title: '序号', type: 'index', align: 'center', width: 60 },
                { title: '商品序号', key: 'goodsIndex', align: 'center', width: 130 },
                { title: '税号', key: 'taxNo', align: 'center' },
                { title: '货名', key: 'goodsName', align: 'center' },
                { title: '从价税率', key: 'valoremRate', align: 'center', width: 80 },
                { title: '从量税率', key: 'specificRate', align: 'center', width: 80 },
                { title: '税额', key: 'taxAmount', align: 'center', width: 80 }
            ],
            seColumns: [
                { title: '序号', type: 'index', align: 'center', width: 60 },
                { title: '税费单号', key: 'taxNo', align: 'center', width: 130 },
                { title: '单位代码', key: 'agentCode', align: 'center' },
                { title: '单位名称', key: 'agentName', align: 'center' }
            ],
            fhColumns: [
                { title: '序号', type: 'index', align: 'center', width: 60 },
                { title: '税费单号', key: 'taxNo', align: 'center', width: 130 },
                { title: '收发货单位编码', key: 'tradeCode', align: 'center' },
                { title: '境内收发货人名称', key: 'tradeName', align: 'center' }
            ],
            zfColumns: [
                { title: '序号', type: 'index', align: 'center', width: 60 },
                { title: '协议流水号', key: 'agreementSerialNumber', align: 'center', width: 130 },
                { title: '协议书号', key: 'agreementNumber', align: 'center' },
                { title: '开户行名称', key: 'bankName', align: 'center' },
                { title: '付款账户', key: 'paymentAccount', align: 'center' },
                { title: '缴款单位', key: 'paymentName', align: 'center' }
            ]

        }
    },
    mounted () {
        this.queryList()
        // this.getSchoolList()
        // this.getRoleType()
        console.log(this.$route)
        this.trainingId = this.$route.params.trainingId
    },
    methods: {
        ok () {
            let idArr = this.selecetd.map(item => {
                return item.id
            })
            console.log(this.selecetd)
            let ids = idArr.join(',')
            let params = {
                headUnit: this.nowTt,
                id: ids,
                status: this.zfType
            }
            pay(params).then(res => {
                if (res.data.code != '0000') {
                    this.$Message.success(res.data.data)
                    return
                }
                this.$Message.success('成功')
                this.showShenQ = false
                this.queryList()
            })
        },
        doPay () {
            this.$Modal.confirm({
                title: '提示',
                content: `您本次要缴纳的税费总额为 ${this.all},是否确认申请支付？`,
                onOk: () => {
                    this.zfType = 1
                    this.ok()
                },
                onCancel: () => {

                }
            })
        },
        next () {
            this.type = 1
        },
        prev () {
            this.type = 0
        },
        changeTt (data) {
            this.nowTt = data
        },
        changeHwDetail () {
            if (this.hwSelected.length == 0) {
                this.$Message.error('请勾选')
            } else if (this.hwSelected.length == 1) {
                this.nowHwDetail = this.hwSelected[0]
                this.$nextTick(() => {
                    this.showHwDetail = true
                })
            } else {
                this.$Message.error('请勾选一个')
            }
        },
        showDetailBtn () {
            if (this.selecetd.length == 0) {
                this.$Message.error('请勾选')
            } else if (this.selecetd.length == 1) {
                this.nowDetail = this.selecetd[0]
                console.log(this.selecetd)
                this.$nextTick(() => {
                    this.showDetail = true
                })
            } else {
                this.$Message.error('请勾选一个')
            }
        },
        showShuiwuBtn () {
            if (this.selecetd.length == 0) {
                this.$Message.error('请勾选')
            } else if (this.selecetd.length == 1) {
                this.nowDetail = this.selecetd[0]
                console.log(this.selecetd)
                this.$nextTick(() => {
                    this.showShuiWu = true
                })
            } else {
                this.$Message.error('请勾选一个')
            }
        },
        showShenQBtn () {
            if (this.selecetd.length == 0) {
                this.$Message.error('请勾选')
            } else {
                this.showShenQ = true
            }
        },
        showQueRBtn () {
            if (this.selecetd.length == 0) {
                this.$Message.error('请勾选')
            } else {
                this.$Modal.confirm({
                    title: '提示',
                    content: `您本次要缴纳的税费总额为 ${this.all},是否确认申请支付？`,
                    onOk: () => {
                        this.zfType = 2
                        this.ok()
                    },
                    onCancel: () => {

                    }
                })
            }
        },
        changeTab (data) {
            this.now = data
            console.log(data)
            this.params.status = parseInt(data)
            this.queryList()
        },
        changeSelected (data) {
            this.selecetd = data
            let a = 0
            this.selecetd.map(item => {
                a = a + item.paymentAmount
            })
            this.all = a
        },
        changeHwSelected (data) {
            this.hwSelected = data
        },
        clearSearch () {
            this.queryList()
        },
        search () {
            this.params.pageNum = 1
            this.queryList()
        },
        queryList () {
            getTaxList(this.params).then(res => {
                if (res.data.code === '0000') {
                    this.list = res.data.data.list
                    this.total = res.data.data.total
                }
            })
        },
        view (row) {
            this.nextPageReload()
            this.$router.push({
                name: 'licenceExportInfo',
                query: {
                    applyId: row.applyId
                }
            })
        },
        add () {
            this.nextPageReload()
            this.$router.push({
                name: 'licenceExportInfo'
            })
        },
        handleEdit (id) {
            this.nextPageReload()
            this.$router.push({
                name: 'normalCert',
                query: {
                    type: type
                }
            })
        },
        apply () {
            if (this.selecetd.length > 0) {
                let idArr = this.selecetd.map(item => {
                    return item.id
                })
                let ids = idArr.join(',')
                licenceExportApply({ ids: ids, practicalTrainingId: this.trainingId }).then(res => {
                    if (res.data.code === '0000') {
                        this.$Message.success('申报成功')
                        this.params.pageNum = 1
                        this.queryList()
                    } else {
                        this.$Message.error(res.data.msg)
                    }
                })
            } else {
                this.$Message.error('请勾选')
            }
        },
        applyOne (id) {
            licenceExportApply({ ids: id, practicalTrainingId: this.trainingId }).then(res => {
                if (res.data.code === '0000') {
                    this.$Message.success('申报成功')
                    this.params.pageNum = 1
                    this.queryList()
                } else {
                    this.$Message.error(res.data.msg)
                }
            })
        },
        del () {
            if (this.selecetd.length > 0) {
                this.$Modal.confirm({
                    title: '提示',
                    content: '确认是否删除？',
                    onOk: () => {
                        let idArr = this.selecetd.map(item => {
                            return item.id
                        })
                        let ids = idArr.join(',')
                        licenceExportDel({ ids: ids }).then(res => {
                            if (res.data.code === '0000') {
                                this.$Message.success('删除成功')
                                this.params.pageNum = 1
                                this.queryList()
                            } else {
                                this.$Message.error(res.data.msg)
                            }
                        })
                    }

                })
            } else {
                this.$Message.error('请勾选')
            }
        },
        delOne (id) {
            this.$Modal.confirm({
                title: '提示',
                content: '确认是否删除？',
                onOk: () => {
                    delCertificate({ ids: id }).then(res => {
                        if (res.data.code === '0000') {
                            this.$Message.success('删除成功')
                            this.params.pageNum = 1
                            this.queryList()
                        } else {
                            this.$Message.error(res.data.msg)
                        }
                    })
                }
            })
        },
        handleDownload (id) {
            downloadDoc(id, '/case/download')
        }
    }
}
</script>
<style scoped>
.text-r{
    text-align: right;

}
.text-r-h{
    line-height: 30px;
    padding-right:5px;
}
.mt-10{
    margin-top:10px;
}
.lh30{
    line-height: 30px;
}
</style>
